<template>
  <div class="order">
    <div class="main">
      <div class="address">
        <router-link
          class="address-content"
          v-if="addressInfo.id"
          to="/addressmanage?from=orderconfirm"
          tag="div"
        >
          <div class="left">
            <p class="name">{{ addressInfo.name }}</p>
            <p class="tag" v-if="addressInfo.is_default == 1">默认</p>
          </div>
          <div class="center">
            <p class="phone">{{ addressInfo.mobile }}</p>
            <p class="addr">
              {{ addressInfo.address }}
              {{ addressInfo.address_detail }}
            </p>
          </div>
          <van-icon name="arrow" size="20px" color="#999" />
        </router-link>
        <router-link
          tag="div"
          class="empty"
          to="/addressmanage?from=orderconfirm"
        >
          请选择地址
        </router-link>
      </div>
      <div class="orderInfo">
        <van-cell-group>
          <van-cell title="商品合计" :value="`￥${allPrise}`" />
          <van-cell title="运费" value="免运费" />
          <van-cell title="优惠券" value="暂无" />
        </van-cell-group>
      </div>
      <div class="list">
        <div v-for="item in goodsList" :key="item.id" class="item">
          <img :src="item.list_pic_url" />
          <div class="info">
            <p>{{ item.goods_name }}</p>
            <p>￥{{ item.retail_price }}</p>
          </div>
          <span class="num">x {{ item.number }}</span>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="left">实付: ￥{{ allPrise }}</div>
      <div class="right" @click="payment">支付</div>
    </div>
  </div>
</template>
<script>
import { detailAction } from "@/api/cart/orderconfirm/index";
export default {
  data() {
    return {
      allPrise: 0,
      addressInfo: {},
      goodsList: [],
      addressId: "",
    };
  },
  methods: {
    payment() {
      this.$toast("功能暂未开放");
    },
  },
  created() {
    this.addressId = localStorage.getItem("selAddressId") || "";
    detailAction({
      openId: localStorage.getItem("openId"),
      addressId: this.addressId,
    }).then((res) => {
      console.log(res);
      this.addressInfo = res.data.address;
      this.goodsList = res.data.goodsList;
      this.allPrise = res.data.allPrise;
    });
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
